<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <el-container style="text-align: center; margin-top: 100px;">
        <el-form :label-width="'100px'" style="width: 350px; margin: 0 auto;">
            <h2>管理员密码</h2>
            <el-form-item label="密码">
                <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <span style="margin-right: 20px;">
                    <a href="index.html">返回主页面</a>
                </span>
                <el-button type="primary" @click="submitPassword">确认</el-button>
            </el-form-item>
        </el-form>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                password: ''
            };
        },
        methods: {
            submitPassword() {
                var _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/login', _this.password)
                    .then(response => {
                        if (response.data.code === 200) {
                            window.location.href = 'admin.html';
                        } else {
                            this.$message.error('密码错误');
                        }
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                        this.$message.error('请求失败，请重试');
                    });
            }
        }
    });
</script>
</body>
</html>